<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="4" style="margin-left: 500px">
                <div class="grid-content bg-purple">
                    <div class="demo-input-suffix" style="margin-bottom: 20px;margin-top: 20px">
                        <el-autocomplete
                                v-model="state"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入用户名"
                                value-key="nickName"
                                @select="handleSelect"
                        ></el-autocomplete>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <el-button
                        type="primary"
                        size="medium"
                        icon="el-icon-search"
                        @click="searchUserList"
                        round
                        plain
                        style="margin-bottom: 20px;margin-top: 20px">
                    搜索
                </el-button>
            </el-col>
        </el-row>
        <el-table
                stripe
                :data="userList"
                style="width: 100%;"
                size="medium">
            <el-table-column
                    label="头像"
                    align="center"
                    width="180">
                <template slot-scope="scope">
                    <div>
                        <el-avatar :src="scope.row.avatarUrl"></el-avatar>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="昵称"
                    align="center"
                    width="180">
                <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.nickName }}</el-tag>
                        </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="电话"
                    align="center"
                    width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.tel!=null">{{ scope.row.tel }}</span>
                    <span v-else>尚未填写</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="会员折扣次数"
                    align="center"
                    width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.vip!=0">{{ scope.row.vip }}</span>
                    <span v-else>非会员</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="账号状态"
                    align="center"
                    width="180">
                <template  slot-scope="scope">
                    <span v-if="scope.row.status==1"><el-tag type="success">正常</el-tag></span>
                    <span v-else><el-tag type="danger">禁用</el-tag></span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">
                                    <el-button
                                            circle
                                            type="primary"
                                            size="mini"
                                            disabled>
                                        恢复
                                    </el-button>
                                    <el-button
                                            circle
                                            type="warning"
                                            size="mini"
                                            @click="changeUserStatus( scope.row)">
                                        禁用
                                    </el-button>
                                </span>
                    <span v-else>
                        <el-button
                                circle
                                type="primary"
                                size="mini"
                                @click="changeUserStatus( scope.row)">
                            恢复
                        </el-button>
                        <el-button
                                circle
                                type="warning"
                                size="mini"
                                disabled>
                            禁用
                        </el-button>
                    </span>
                    <el-button
                            circle
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="deleteUser( scope.row)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-left: 200px"
                :page-size="6"
                :pager-count="5"
                @current-change="getUserByPage"
                layout="prev, pager, next"
                :total="totalUser">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                searchUser: [],
                state: '',
                timeout:  null,
                userList:[],     //分页获取的用户列表
                totalUser:null,   //分页总条数
                tempUser:''
            };
        },
        created() {
            this.getUserByPage(1);
        },
        methods: {
            //搜索用户时进行加载
            loadAll() {
                var that=this;
                this.$ajax.post('/jz/user/getAllUser').then(function (resp) {
                     //console.log(resp.data.userList)
                     that.searchUser=resp.data.userList;
                })
            },

            querySearchAsync(queryString, cb) {
                var users = this.searchUser;
                var results = queryString ? users.filter(this.createStateFilter(queryString)) : users;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.nickName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item.nickName);
                this.tempUser=item;

            },

            searchUserList(){
                if(this.tempUser==''){
                    this.$message.error("没有找到该用户，请重新输入！")
                }
                else {
                    this.userList.splice(0);
                    this.userList[0]=this.tempUser;
                }

            },

            getUserByPage(currentPage){
                var that=this;
                this.$ajax.post('/jz/user/showUserByPage?currentPage='+currentPage).then(function (resp) {
                    console.log(resp.data);
                    if(resp.data.status==200){
                        that.totalUser=resp.data.totalCount;
                        that.userList=resp.data.userList;
                    }
                    if(resp.data.status==204){
                        that.$message.error('没有用户');
                        that.userList=resp.data.userList;
                    }
                })
            },

            changeUserStatus(row){
                console.log(row)
                var that=this;
                this.$ajax.get('/jz/user/changeUserStatus?id='+row.id).then(function (resp) {
                    console.log(resp.data);
                    if(resp.data.status==200){
                        that.$message({
                           message: '状态已更改，请刷新！',
                           type: 'success'
                       })
                    }
                    if(resp.data.status==204){
                        that.$message.error('状态更改失败');
                    }
                })
            },

            deleteUser(row) {
                console.log( row);
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that=this;
                    this.$ajax.post('/jz/user/deleteUserById?id='+row.id).then(function (resp) {
                        //console.log(resp.data);
                        if(resp.data.status==200){
                            that.$message({
                                message: '删除成功，请刷新！',
                                type: 'success'
                            });
                        }
                        if(resp.data.status==204){
                            that.$message.error('删除失败，请重试！');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        mounted() {
            this.loadAll();
        }
    }
</script>

<style scoped>

</style>
